<template>
  <view class="info-cell-class">
    <view class="info-cell-content">
      <!-- <view class="info-label">{{ label }}</view> -->
      <view v-if="type == 'text'" class="info-value">{{ value }}</view>
      <!-- 箭头 -->
      <view v-if="isLink" class="cell-arrow">
        <u-icon name="arrow-right" />
      </view>
    </view>
    <view v-if="type === 'image'" class="info-image">
      <image
        v-for="(img, index) in imgSrc"
        :key="index"
        width="25vw"
        height="25vw"
        radius="2vw"
        :src="img"
        class="image-class"
        @click="imagePreview(index)"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
 
  props: {
    type: {
      type: String,
      default: "text",
    },
    label: {
      type: String,
      default: "标签的名称",
    },
    value: {
      type: String | Number,
      default: "",
    },
    image: {
      type: Array,
      default: () => [],
    },
    isLink: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    imgSrc() {
      return this.image.filter(f => Boolean(f))
    }
  },
  methods: {
    imagePreview(index) {
		uni.previewImage({
			current: index,
			urls: this.imgSrc
		})
    },
  },
};
</script>

<style lang="scss" scoped>
.info-cell-class {
	margin-top: 20rpx;
  padding: 3vw 3vw;
  color: rgb(179, 181, 185);
  font-size: 3.8vw;
  font-weight: 300;
  position: relative;
  // &:after {
  //   content: "";
  //   position: absolute;
  //   left: 3vw;
  //   right: 3vw;
  //   bottom: 0;
  //   height: 1px;
  //   transform: scaleY(0.5);
  //   background-color: #e5e5e5;
  // }
  .info-cell-content {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    .info-label {
      width: 32vw;
      flex-shrink: 0;
    }
    .info-value {
      flex: 1;
    }
    .cell-arrow {
      transform: scaleX(0.8);
    }
  }
  .info-image {
    // margin-top: 2vw;
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;
    .image-class {
		width: 25vw;
		height: 25vw;
		margin-right: 15rpx;
		margin-bottom: 20rpx;
      // margin-right: 1.8vw;
      // margin-bottom: 0.5vw;
      // &:nth-child(3n) {
      //   margin-right: 0;
      // }
    }
  }
}
</style>